<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        Virtual DOM 的原理
            Virtual DOM 是用来解决什么问题的？
                每次调用 Render() 函数，都会触发 DOM 的修改 -> layou -> repaint
                在 jQuery/Zepoto 年代，这个动作是前端代码直接触发的，在 React 中，这个动作是框架触发的。
                其实可以全部清理掉 (tear down) 然后重画，但是这样效率太低了。
            1. 当数据被修改后，React 根据新的数据生产一个新的 VDOM
            2. VDOM,是一个 JS 对象，类似 JSON
            3. 新生成的 VDOM 会和之前的 VDOM 进行比较 (Diff 算法(max(n,m)):  比较根节点，类型，key)
            注意：
                1. 在循环生成的元素上，需要 key 属性
                2. key 属性不应该改动，错误的改动 key 属性意味着效率的降低和可能发生错误
            4. 根据比较得到的不同，生成应该补丁 (patch)
            5. 基于补丁，更新 DOM
     -->
</body>
</html>